<template>
    <div class="layout">
        <div class="layout-content">
            <Row>
                <Col span="5" class="tree">
                    <Tree :data="data5" @on-select-change="selectNode" ref="tree"></Tree>
                </Col>
                <Col span="19">
                    <div class="layout-content-main">
                        <Upload
                            multiple
                            type="drag"
                            name='aaabbb'
                            :before-upload="onAdd"
                            :action=this.url
                            :on-success="onSuccess">
                            <div style="padding: 20px 0">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>点击或将文件拖拽到这里上传</p>
                            </div>
                        </Upload>
                        <Button type="primary" @click="deletes">删除</Button>
                        <Input v-model="searchValue" class='searchInput'>
                            <Button type="primary" slot="append" icon="ios-search" @click="onSearch">搜索</Button>
                        </Input>
                        <Table border :columns="columns7" :data="data6" @on-selection-change="onSelectionChange" @on-select="onSelect"></Table>
                        <Modal v-model="modal1" title="修改文件名">
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="50">
                                <FormItem label="ID" prop="_id">
                                    <Input type="text" v-model="formValidate._id"></Input>
                                </FormItem>
                                <FormItem label="文件名" prop="filename">
                                    <Input type="text" v-model="formValidate.filename"></Input>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                                </FormItem>
                            </Form>
                        </Modal>

                        <Page :total="pageCount" :page-size="pageSize" show-sizer show-elevator show-total 
                        @on-change="change" @on-page-size-change="changePage"></Page>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="layout-copy">
            2011-2016 &copy; TalkingData
        </div>
    </div>
    
</template>
<script>  
    export default {
        data(){
            return{
                url:'',
                categoryId:'',
                pageCount:0,
                pageSize:10,
                history:[],
                ids:[],
                searchValue:'',
                data5: [
                    {
                        title: '分类',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-plus-empty',
                                            type: 'primary'
                                        }),
                                        style: {
                                            width: '52px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: [],
                    }
                ],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
                formItem: {
                    input: '',
                    upInput:'',
                },
                modal1: false,
                formValidate: {
                    filename:'',
                    _id:'',
                },
                ruleValidate: {
                    filename: [
                        { required: true, message: '文件名不能为空', trigger: 'blur' }
                    ],
                },
                columns7: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        title:'序号',
                        width:65,
                        align: 'center'
                    },
                    {
                        title: '图片',
                        key: 'filename',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    attrs: {
                                        src:"http://localhost:3000/"+params.row.filename,
                                        style:"width:100px;height:100px"
                                    },
                                }),
                            ]);
                        }
                    },
                    {
                        title: '文件名',
                        key: 'filename'
                    },
                    {
                        title: '大小',
                        key: 'size'
                    },
                    {
                        title: '类型',
                        key: 'mimetype'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type:'warning'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onUpdate(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type:'error'
                                    },
                                    on: {
                                        click: () => {
                                            this.confirm(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data6: []
            }
        },
        methods:{
            show(){
                console.log("show");
            },
            deletes(){
                if(this.ids.length>0){
                    this.$Modal.confirm({
                        title: '警告！',
                        content: '<p>你确定要删除该用户吗</p>',
                        onOk: () => {
                            this.$http.post('http://localhost:3000/upload/deletes',{idarr:this.ids.toString()})
                            .then(res=>{
                                this.$Message.info("删除数据成功");
                                this.getData();
                            })
                        }
                    });
                }else{
                    this.$Modal.warning({title: "警告！",content:"请选择要删除的数据!"});
                }
            },
            change(index){
                var _start = ( index - 1 ) * this.pageSize;
                var _end = index * this.pageSize;
                this.data6 = this.history.slice(_start,_end);
            },
            changePage(q){
                this.pageSize=q;
                 this.data6 = this.history.slice(0,this.pageSize);
            },
            confirm(index){
                this.$Modal.confirm({
                    title: '警告！',
                    content: '<p>你确定要删除该新闻吗</p>',
                    onOk: () => {
                        var deleteUrl='http://localhost:3000/upload/data/'+this.data6[index]._id;
                        this.$http.delete(deleteUrl)
                        .then(res=>{
                             this.getData();
                        })
                    }
                });
            },
            onUpdate(row){
                this.modal1=true;
                Object.assign(this.$data.formValidate,row);
            },
            onAdd(){
                var treeNode=this.getSelectedNodes();
                if(treeNode.length<1){
                     this.$Modal.error({
                        title: "提示",
                        content: "请先选择左侧类型",
                    });
                    return false;
                }
            },
            onSuccess(){
                this.$Modal.success({
                    title: "提示",
                    content: "上传成功",
                });
                this.getData();
            },
            onSearch(){
                this.getData();
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http.put(`http://localhost:3000/upload/data/${this.formValidate._id}`,this.formValidate)
                            .then(res=>{
                                this.$Message.success('修改成功!');
                                this.modal1=false;
                                this.getData();
                            })
                       
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            getSelectedNodes(){
                return this.$refs.tree.getSelectedNodes();
            },
            onSelectionChange(selection){
                if(selection&&selection.length>0){
                    var ids=[];
                    let len=selection.length;
                    for(let i=0;i<len;i++){
                        ids.push(selection[i]._id);
                    }
                    this.ids=ids;
                }
            },
            selectNode(res){
                var resLen=res.length;
                if(resLen>0){
                    this.url="http://localhost:3000/upload/upload/"+res[0]._id;
                    this.$http.get('http://localhost:3000/classify/allnode/'+res[0]._id)
                    .then(res=>{
                        var dataChildren=res.data.toString();
                        this.$http.post('http://localhost:3000/upload/children',{categoryId:dataChildren})
                        .then(res=>{
                            this.pageCount=res.data.length;
                            this.history=res.data;
                            this.data6 = this.history.slice(0,10);
                        })  
                    })
                }else{
                    this.getData();
                }
            },
            getClassifyData(){
                this.$http.get('http://localhost:3000/classify/list/2')
                .then(res=>{
                    this.data5=res.data;
                })
            },
            onSelect(res){
                this.$emit("imgObject",res);
            },
            getData(){
                this.$http.post('http://localhost:3000/upload/list',{filename:this.searchValue})
                .then(res=>{
                    this.pageCount=res.data.length;
                    this.history=res.data;
                    this.data6 = this.history.slice(0,10);
                })
            }
        },
        created(){
            this.getClassifyData();
            this.getData();
        }
    }
</script>
<style scoped>
     .tree{
        width:150px;
    }
    .searchInput{
        float:left;
        width:300px;
    }
</style>